<template>
  <div class="base-container">
    <!-- header -->
    <div class="c--header">
      <base-header></base-header>
    </div>
    <!-- content -->
    <div class="c--content">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <!-- footer -->
    <div class="c--footer">
      <base-footer></base-footer>
    </div>
  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue'
import baseHeader from "../common/base-header.vue"
import baseFooter from "../common/base-footer.vue"

export default defineComponent({

  components:{baseHeader,baseFooter}
})
</script>


<style lang="scss" scoped>
.base-container{
  height:100vh;
  display: flex;
  flex-direction: column;
  .c--header{

  }
  .c--content{
    flex:1;
    display: flex;
    > * {
      flex:1;
    }
  }
}
</style>
